<script setup lang="ts">
import { ref } from 'vue'
import vueDanmaku from 'vue3-danmaku'

const danmaku = ref([
  '这个游戏的人设太可爱了！',
  '加油，楼主！',
  '这款游戏的画风真是绝了！',
  '一起组队打BOSS吧！',
  '新版本更新了哪些新角色？',
  '这个剧情有点燃啊！',
  '角色的技能设计太赞了！',
  '这个游戏的BGM真好听！',
  '第一名！',
  '最近有什么值得入坑的二次元游戏推荐吗？',
  '希望大家都能顺利毕业。',
  '来碗 Damn Damn 面，只要 Damn Damn 不要面',
  '游戏的UI设计真是棒极了！',
  '大家好，我是新人。',
  '这个游戏的社区氛围好棒！',
  '这个功能有点小问题。',
  '666666666',
  '这个游戏的剧情改编成动画应该很受欢迎。',
  '希望游戏可以加入更多互动元素。',
  '操作体验真滴耐思',
  '游戏的剧情发展让人捉摸不透啊！'
])

const danmakuRef = ref()
let input = ref('')
function addDanmaku() {
  if (input.value) {
    danmakuRef.value.add(input.value)
    input.value = ''
  }
}
</script>

<template>
  <div class="login-view">
    <vue-danmaku
      ref="danmakuRef"
      :channels="6"
      :speeds="150"
      :font-size="20"
      :top="10"
      v-model:danmus="danmaku"
      color="#fff"
      loop
      style="width: 100vw; height: 60vh"
    >
    </vue-danmaku>

    <div style="display: flex; justify-content: center">
      <el-input
        v-model="input"
        clearable
        style="width: 400px; margin-right: 10px"
        placeholder="🚀装填弹幕叭！"
      ></el-input>
      <el-button type="warning" @click="addDanmaku">留言</el-button>
    </div>
  </div>
</template>
